<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html>
	<head>
		<title>注册</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="<c:url value='/css/style1.css'/>" />
		<script type="text/javascript" src="<c:url value='/js/aj.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/js/jquery-1.8.3.min.js'/>"></script>
		 
	</head>
	<style>
		body{background:url("../images/rebc.gif");}
		input[type="text"],input[type="password"]{height:38px;outline:none;border: 1px solid #80BC27;background:#fff;width:300px;}
		.validate{background:#ff5c00;color:#fff;border-radius:3px;}
	</style>
	<body>
		<h1 style=" width:130px;margin:50px auto;color:#008000;font-size:26px;">@Tony.com</h1>
		<div id="wrap">
			<div id="top_content" style="box-shadow:1px 1px 10px 1px #F3EAE1;;">
					<div id="header">
						<div id="navigation">
						<a href="login.htm" style="font-size:18px;font-family:微软雅黑;text-decoration:none;color:#fff;float:right;margin-right:20px;line-height: 50px;">登录</a>
						</div>
					</div>
				<div id="content" style="position:relative;">
					<p id="whereami">
					</p>
					<form action="add.htm" method="post" id="form" style="width: 400px;">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="left" style="position:relative;">
									<input type="text" id="usernick" class="inputgri" name="usernick" autofocus autocomplete="off" placeholder="输入昵称" style="font-family: 微软雅黑;"/>
									<span id="vali_nic" class="validate" style=" position:absolute;right:60px;top:11px;"></span>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="left" style="position:relative;">
									<input type="text" class="username" name="username" autocomplete="off" placeholder="输入真实姓名" style="font-family: 微软雅黑;"/>
									<span class="validate_user validate" style=" position:absolute;right:60px;top:11px;"></span>
								</td>
								
							</tr>
							<tr>
								<td valign="middle" align="left" style="position:relative;">
									<input type="password" class="userpassword" name="userpassword" autocomplete="off" placeholder="输入密码" style="font-family: 微软雅黑;"/>
									<span class="validate_pwd validate" style=" position:absolute;right:60px;top:11px;"></span>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="left">
									男
									<input type="radio" class="inputgri" name="usersex" value="1" checked="checked"/>
									女
									<input type="radio" class="inputgri" name="usersex" value="0"/>
								</td>
							</tr>
							
							<tr>
								<td valign="middle" align="left">
									<div class="yzm_box" style="display: inline-block;position: relative;">
										<input type="text" class="inputgri" id="yzmval" autocomplete="off" name="numberyzm" style="width:198px;font-family: 微软雅黑;" placeholder="输入验证码"/>
										<span style="position:absolute;right:8px;top:7px;color:#fff;<c:if test="${yzmMsgError=='验证码错误'}">padding:5px 4px;</c:if>" class="yzmmsg validate">${yzmMsgError}</span>
									</div>
									<img width="100" height="38" style="vertical-align: bottom;" id="num" src="../yzm/yzm.do" onclick="this.src='../yzm/yzm.do?d='+(new Date().getTime())"/>
									<a style=" text-decoration:none;color:#008000;font-family:微软雅黑;" href="javascript:;" onclick="document.getElementById('num').src = '../yzm/yzm.do?'+(new Date()).getTime()">换一张</a>
									
								</td>
							</tr>
						</table>
						<style>
							input[type="submit"],input[type="reset"]{ width:150px;border:none;background:green;color:#fff;padding:10px 0;font-family:微软雅黑;cursor:pointer;}
							input[type="submit"]:hover{background:#0FA90F;}
							input[type="reset"]:hover{background:#0FA90F;}
						</style>
						<p style="text-align: left;margin-left: 10px;">
							<input type="submit" class="submitbtn" value="提交" />
							<input type="reset" class="resetbtn" value="重置" />
						</p>
					</form>
					<!-- 第三方登录 -->
					<style>
						.thirdpart a{float:left;display:block;margin:0 8px;}
						.thirdpart a i{background:url("../images/fouricon.png"); width:55px;height:55px;display:block;float:left;}
						.thirdpart a .i1{background-position:0 -65px;}
						.thirdpart a .i2{background-position:-81px -65px;}
						.thirdpart a .i3{background-position:-162px -65px;}
						.thirdpart a .i4{background-position:-242px -65px;}
						.thirdpart .td1:hover .i1{background-position:0px -1px;}
						.thirdpart .td2:hover .i2{background-position:-81px -1px;}
						.thirdpart .td3:hover .i3{background-position:-162px -1px;}
						.thirdpart .td4:hover .i4{background-position:-243px -1px;}
						
						.thirdpart .layout_inner{border-bottom:2px solid #f2f2f2;}
						.thirdpart .layout_inner h3{}
					</style>
					
					<div class="thirdpart" style=" width:50%;position:absolute;top:50px;right:10px;">
						<a class="td1" href="#"><i class="i1"></i></a>
						<a class="td2" href="#"><i class="i2"></i></a>
						<a class="td3" href="#"><i class="i3"></i></a>
						<a class="td4" href="#"><i class="i4"></i></a>
						<div class="layout_inner" style=" width:286px;position:relative;top:80px;">
                        	<h3 style="color:#489E48;position:absolute;top:-20px;right:82px;background:#fff;padding:2px 14px;">合作方帐号登录</h3>
                   		</div>
					</div>
					
					<div style="clear:both;"></div>
				</div>
			</div>
		</div>
		
	<script>
		$(function(){
			/**
			 *表单提交验证
			 */
			$(".submitbtn").click(function(e){
				var $username=$.trim($(".username").val());
				var $password=$.trim($(".userpassword").val());
				var $nick=$.trim($("#usernick").val());
				var $yzm=$.trim($("#yzmval").val());
				
				if($nick==""){
					$("#vali_nic").show().html("请填写真实姓名").css({"background":"#ff5c00","padding":"5px 4px"});
					return false;
				}else{
					var flags=[];
					//$("#vali_nick").html("");
					var ajaxParams={"usernick":$.trim($("#usernick").val())};
					$.ajax({
						async:false,/////同步提交，必须为同步
						type:"get",
						url:"checknick.do",
						data:ajaxParams,
						success:function(rst){
							//flags.push(rst);
							if(rst=="true"){
								$("#vali_nic").show().html("该昵称已被注册").css({"background":"#ff5c00","padding":"5px 4px"});
								flags.push(rst);
							}
						}
					});
					if(flags[0]=="true"){
						return false;
					}
				}
				if(!$username){
					$(".validate_user").show().html("请填写真实姓名").css("padding","5px 4px");
					return false;
				}else{
					$(".validate_user").hide();
				}
				if(!$password){
					$(".validate_pwd").show().html("请填写密码").css("padding","5px 4px");
					return false;
				}else{
					$(".validate_pwd").hide();
				}
				if($yzm==""||$yzm==null){
					$(".yzmmsg").show().html("请填写验证码").css({"padding":"5px 4px","color":"#fff"});
					return false;
				}
				
				
			});
			
			
			
			/**
			 *失去焦点验证
			 */
			
			$(".username").blur(function(){
				var $username=$(".username").val();
				if($username==""){
					$(".validate_user").show().html("请填写真实姓名").css("padding","5px 4px");
					return false;
				}else{
					$(".validate_user").hide();
				}
			});
			
			$(".userpassword").blur(function(){
				var $password=$(".userpassword").val();
				if($password==""){
					$(".validate_pwd").show().html("请填写密码").css("padding","5px 4px");
					return false;
				}else{
					$(".validate_pwd").hide();
				}
			});
			
			$("#usernick").blur(function(){
				var $usernick=$("#usernick").val();
				if($usernick==""){
					$("#vali_nic").show().html("请填写真实姓名").css({"background":"#ff5c00","padding":"5px 4px"});
					return false;
				}else{
					$("#vali_nic").hide();
				}
				
				var params={"usernick":$.trim($("#usernick").val())};
				$.ajax({
					type:"get",
					url:"checknick.do",
					data:params,
					success:function(data){
						if(data=="true")
						{	
							$("#vali_nic").show().html("该昵称已被注册").css({"background":"#ff5c00","padding":"5px 4px"});
						}else{
							$("#vali_nic").show().html("可以注册").css({"background":"green","padding":"5px 4px"});
						}
					},
					error:function(data){
						alert("error");
					}
					
				});
			});
			
			 $("#yzmval").blur(function(){
					var $yzmval=$("#yzmval").val();
					if($yzmval==""){
						$(".yzmmsg").show().html("请填写验证码").css({"padding":"5px 4px","color":"#fff"});
						return false;
					}else{
						$(".yzmmsg").hide();
					}
				});
			
			
		});
	</script>
	</body>
</html>
